﻿
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>知乎日报 - 每天 3 次，每次 7 分钟</title>
    <link href="css/style.css" rel="stylesheet" />
  </head>

  <body id="body">
    <!--header start-->
    <header class="headerbox">
      <!--nav start-->
      <nav class="navbox">
        <h1>知乎日报</h1>
        <div class="navright">
          <a class="on" href="#body">app下载</a>
          <a href="#tabtitle">浏览内容</a>
        </div>
      </nav>
      <!--nav end-->
    </header>
    <!--header end-->
    <!--banner start-->
    <section class="banner">
      <div class="container">
        <div class="">
          <img
            src="images/phone_sample.png"
            alt="知乎日报应用截屏"
            class="phoneimg loaded"
          />
        </div>
        <div class="content">
          <h2>每天三次 每次七分钟</h2>
          <div class="info">
            在中国，资讯类移动应用的人均阅读时长是 5
            分钟，而在知乎日报，这个数字是 21。
          </div>
        </div>
      </div>
    </section>
    <!--banner end-->
    <!--tabtitle start-->
    <section class="tabtitle" id="tabtitle">
      <h3>浏览内容</h3>
      <h4>最新内容</h4>
    </section>
    <!--tabtitle end-->
    <!--list start-->
    <section class="list">
      <ul>
        <li>
          <a href="#">
            <img src="images/1.jpg" alt="" />
            <p>怎样使金属变得很脆？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/2.jpg" alt="" />
            <p>有哪些对你很有冲击力的设计？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/3.jpg" alt="" />
            <p>有哪些很重要，教练却没有教的驾驶技巧？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/5.jpg" alt="" />
            <p>谢谢天上掉的玩具</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/6.jpg" alt="" />
            <p>火车上的「最大上沙量」标识是什么意思？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/7.jpg" alt="" />
            <p>翼龙可以当飞行坐骑么？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/1.jpg" alt="" />
            <p>怎样使金属变得很脆？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/2.jpg" alt="" />
            <p>有哪些对你很有冲击力的设计？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/3.jpg" alt="" />
            <p>有哪些很重要，教练却没有教的驾驶技巧？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/5.jpg" alt="" />
            <p>谢谢天上掉的玩具</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/6.jpg" alt="" />
            <p>火车上的「最大上沙量」标识是什么意思？</p>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/7.jpg" alt="" />
            <p>翼龙可以当飞行坐骑么？</p>
          </a>
        </li>
      </ul>
      <div class="more">
        <a href="#">更多精彩内容请在APP中查看</a>
      </div>
    </section>
    <!--list end-->
    <!--footer start-->
    <footer class="footer">
      <div class="footerBox">
        <div class="footerL">
          <p>
            知乎日报是一款拥有千万用户的资讯类客户端，每日提供来自知乎社区的精选问答，还有国内一流媒体的专栏特稿。
          </p>
          <p>
            主题日报包括动漫、设计、大公司、游戏、财经、电影、电子音乐、互联网安全等丰富内容，为业内人和资深爱好
            者推荐各领域最精彩文章，满足高质量阅读需求。
          </p>
          <p>在知乎日报，告别浮躁，重获阅读的愉悦。</p>
          <p>© 2020 知乎</p>
        </div>
        <div class="footerR">
          <img src="images/qr.png" alt="" />
          <p>扫描下载客户端</p>
        </div>
      </div>
    </footer>
    <!--footer end-->
  </body>
</html>